/* eslint-disable eqeqeq */
/* eslint-disable eqeqeq */
<template>
<!-- 精选试题组件 -->

 <div class="questionsChoice-contain">
   <el-card>
     <!-- 头部说明  新增试题按钮 -->
      <div class="btn-wrapper">
        <span style="color:pink;font-size:12px">说明：目前支持学科和关键字条件筛选</span>
        <el-button type="success" size="small" @click='goques'>
          <i class="el-icon-edit"></i>
          新增试题
        </el-button>
      </div>
     <!-- 头部筛选内容部分 -->

      <el-form ref="formData" :model="formData" :rules="rules" size="medium" label-width="100px">
         <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="学科" prop="subjectID">
            <el-select
            @change="handleSub"
            @keyup.enter="handleFilter"
            v-model="formData.subjectID"
            placeholder="请输入学科"
            clearable
            :style="{width: '100%'}">
              <el-option v-for="(item,i) in subNameList" :key="i" :value="item.value" :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item    label="二级目录" prop="twoLevelDisplay" >
            <el-select
            v-model="formData.twoLevelDisplay"
            @keyup.enter="handleFilter"
            placeholder="请输入二级目录"
            clearable
              :style="{width: '100%'}">
              <el-option
               v-for="(item ,i) in twoLeveList" :key="i"
               :label="item.label"
               :value="item.value"
              >
              </el-option>
              </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item    label="标签" prop="tags" >
            <el-select  v-model="formData.tags" placeholder="请输入标签" clearable :style="{width: '100%'}">
              <el-option v-for="(item,i) in tagsList" :key="i"  :label="item.label"
               :value="item.value">

              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="关键字" prop="keyword">
            <el-input v-model="formData.keyword" placeholder="请输入关键字" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="试题类型" prop="questionType">
            <el-select v-model="formData.questionType" placeholder="请输入试题类型" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in Constants.questionType" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="难度" prop="difficulty">
            <el-select v-model="formData.difficulty" placeholder="请输入难度" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in Constants.difficulty" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="方向" prop="direction">
            <el-select v-model="formData.direction" placeholder="请输入方向" clearable :style="{width: '100%'}">
              <el-option v-for="(item,index) in Constants.direction"  :key="index" :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="录入人" prop="creatorID">
            <el-select v-model="formData.creatorID" placeholder="请输入录入人" clearable :style="{width: '100%'}">
              <el-option v-for="item in people" :key="item.id" :value="item.username" :label="item.username"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="题目备注" prop="remarks">
            <el-input v-model="formData.remarks" placeholder="请输入题目备注" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="企业简称" prop="shortName">
            <el-input v-model="formData.shortName" placeholder="请输入企业简称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item @keyup.enter="handleFilter" label="城市" prop="city" >
            <el-select class="filter-item"
                    style="width: 120px;"
                    v-model="requestParameters.province"
                    @keyup.enter="handleFilter"
                    @change="handleProvince"
                    filterable
                     :style="{width: '50%'}">
               <el-option v-for="item in citySelect.province"
                      :key="item"
                      :label="item"
                      :value="item"
              ></el-option>
            </el-select>

            <el-select  class="filter-item"
                    style="width: 120px;"
                    v-model="requestParameters.city"
                    @keyup.enter="handleFilter"
                    filterable
                     :style="{width: '50%'}">
               <el-option v-for="item in citySelect.cityDate"
                      :key="item"
                      :label="item"
                      :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item size="large" style="margin-left:150px">
            <el-button  @click="submitForm">清除</el-button>
            <el-button type="primary" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-col>
         </el-row>
      </el-form>

      <!-- tab切换页 -->
      <el-tabs  type="card" v-model="activeName"  @tab-click="handleClick" >

        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核"  name="second" ></el-tab-pane>
        <el-tab-pane label="已审核"  name="third"></el-tab-pane>
        <el-tab-pane label="已拒绝"  name="fourth"></el-tab-pane>

      </el-tabs>
      <!-- 数据总数 -->
      <div class="total" >
        <i class="el-icon-info"></i>
        <span style="font-size:12px;margin-left:10px">数据一共 {{choiceQues.length}} 条</span>
      </div>
      <!-- 数据展示table -->
      <el-table
        :data="choiceQues"
        border
        style="width: 100%">
        <el-table-column
          fixed  label="试题编号"
          width="150">
          <template slot-scope="scope">
            <span>{{scope.row.number}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="学科"
          width="120">
           <template slot-scope="scope">
            <span>{{scope.row.subject}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="目录"
          width="120">
          <template slot-scope="scope">
            <span>{{scope.row.catalog}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="题型"
          width="120">
          <template slot-scope="scope">
             <span v-if="scope.row.questionType==1">单选</span>
            <span v-else-if="scope.row.questionType==2">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column
          label="题干"
          width="300">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入时间"
          width="120">
          <template slot-scope="scope">
            <span>{{scope.row.addDate| parseTimeByString("{y}-{m}-{d}  {h}:{m}:{s}")}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="难度"
          width="120">
          <template slot-scope="scope" >
            <span v-if="scope.row.difficulty==1">简单</span>
            <span v-else-if="scope.row.difficulty==2">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column
          label="录入人"
          width="120">
          <template slot-scope="scope">
            <span>{{scope.row.creator}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          width="120">
          <template slot-scope="scope">
             <span v-if="scope.row.chkState==1">待审核</span>
            <span v-else-if="scope.row.chkState==2">通过</span>
            <span v-else>拒绝</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核意见"
          width="120">
          <template slot-scope="scope">
            <span>{{scope.row.chkRemarks}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核人"
          width="120">
          <template slot-scope="scope">
            <span>{{scope.row.chkUser}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="发布状态"
          width="120">
           <template slot-scope="scope">
             <span v-if="scope.row.publishState==1">待发布</span>
            <span v-else-if="scope.row.publishState==2">已发布</span>
            <span v-else>已下架</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200">
          <template slot-scope="scope">
            <el-button @click="lookQues(scope.row)" type="text" size="small">预览</el-button>
            <el-button type="text" size="small" v-if="scope.row.chkState!==1" disabled >审核</el-button>
            <el-button type="text" size="small"  v-else @click="doSome(scope.row)">审核</el-button>
            <el-button type="text" size="small"  v-if="scope.row.publishState==2" disabled  >修改
            </el-button>
            <el-button type="text" size="small"  v-else  @click="edit(scope.row.id)">修改
            </el-button>
            <el-button type="text" size="small"  @click="downUp(scope.row)">
              <span v-if="scope.row.publishState==0" ref="seName">下架</span>
              <span v-else ref="seName">上架</span>
            </el-button>
            <el-button type="text" size="small" v-if="scope.row.publishState==2" disabled >
              删除
            </el-button>
            <el-button type="text" size="small" v-else  @click="choiceAdd(scope.row)">
              删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="Number(requestParameters.pagesize)"
          :total="Number(choiceQues.length)"
          :page-sizes="[5,10,20,50]">
        </el-pagination>
      </div>

      <!-- 题目审核弹层 -->
      <el-dialog  v-bind="$attrs" title="题目审核" :visible.sync="showDialog" >
        <el-form ref="doSomesucc"  size="medium" label-width="100px">

          <el-form-item v-model="chkState">
            <!-- <el-radio v-model="radio" label="2">通过</el-radio> -->
            <el-radio  v-model="chkState" label="1"  :value="chkState==1">通过</el-radio>
            <el-radio  v-model="chkState"  label="2" :value="chkState==2" >拒绝</el-radio>
          </el-form-item>

          <el-form-item v-model="chkRemarks">
            <el-input
             style="padding-top:20px"
             type="textarea"
             :rows="2"
              ref="in"
              placeholder="请输入审核意见"
              v-model="chkRemarks"
              :value="chkRemarks"
             >
            </el-input>
          </el-form-item>
        </el-form>
        <el-row  slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false" >取消</el-button>
          <el-button @click="btnOk" type="primary">确认</el-button>
        </el-row>
      </el-dialog>

       <!-- 预览弹层 -->
      <el-dialog v-bind="$attrs" title="题目预览" :visible.sync="showDialogs"  >
        <el-form   size="medium" label-width="100px" v-model="quesMess">
          <el-form-item >
           <span class="quesStyle">【题型】:
             <i v-if="quesMess.questionType==1">单选</i>
             <i v-else-if="quesMess.questionType==2">多选</i>
             <i v-else>简答</i>
           </span>
           <span class="quesStyle">【编号】:{{quesMess.id}}</span>
           <span class="quesStyle">【难度】:
             <i v-if="quesMess.difficulty==1">简单</i>
             <i v-else-if="quesMess.difficulty==2">一般</i>
             <i v-else>困难</i>
           </span>
           <span class="quesStyle">【标签】:{{quesMess.tags}}</span>
           <span class="quesStyle">【学科】:{{quesMess.subjectID}}</span>
           <span class="quesStyle">【目录】:{{quesMess.directoryName}}</span>
           <span class="quesStyle">【方向】:{{quesMess.direction}}</span>
          </el-form-item>
          <hr>

          <el-form-item>
           <span >【题干】:<i style="color:blue" v-html="quesMess.question"></i>
             <i>
                <i v-if="quesMess.questionType==1">单选</i>
                <i v-else-if="quesMess.questionType==2">多选</i>
                <i v-else>简答</i>
                选项:(以下选中的选项为正确答案)
              </i>
              <br>
              <i>
                 <el-radio v-model="radio" label="1">{{quesTion.code}}</el-radio>
                </i>
           </span>

          </el-form-item>
          <hr>

          <el-form-item>
           <span>【参考答案】:
              <el-button type="danger" size="small" @click="videoPlay"> 视频答案解析</el-button>
              <video :src="quesMess.videoURL" :poster="quesMess.img" v-show="vedios" :autoplay="playStatus" height="421" width="650" >
              </video>
            </span>
          </el-form-item>
          <hr>

          <el-form-item>
           <span>【答案解析】:<i v-html="quesMess.answer"></i></span>
          </el-form-item>
          <hr>

          <el-form-item>
           <span>【题目备注】:<i v-html="quesMess.remarks"></i>

             </span>
          </el-form-item>
          <hr>

        </el-form>
        <el-row  slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showDialogs = false" >关闭</el-button>
        </el-row>
      </el-dialog>
    </el-card>
  </div>

</template>
<script>
// 引入 获取学科简单列表接口
import { simple as subSimple } from '@/api/hmmm/subjects.js'

// 引入  获取二级目录列表接口
import { simple as dirSimple } from '@/api/hmmm/directorys.js'

// 引入 获取标签列表接口
import { simple as tagsSimple } from '@/api/hmmm/tags.js'

// 引入 用户简单列表接口
import { simple as userSimple } from '@/api/base/users.js'

// 引入精选题库列表   加入移出精选题库  审核  上下架精选题库试题  试题详情接口
import { choice, choiceAdd, choiceCheck, choicePublish, detail } from '@/api/hmmm/questions.js'

// 引入 通用常量数据
import Constants from '@/api/hmmm/constants.js'

// 引入 城市数据
import { provinces, citys } from '@/api/hmmm/citys.js'

// 过滤空字符串
import { omitBy, isEmpty, isNumber } from 'lodash'

// 视频
import Video from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  name: 'QuestionsChoice',
  components: {},
  props: [],
  data () {
    return {
      Constants,
      activeName: 'first',
      radio: '1',
      // 城市数据
      citySelect: {
        province: [],
        cityDate: []
      },
      // textarea: '',
      subNameList: [], // 学科列表
      twoLeveList: [], // 二级目录列表
      tagsList: [], // 标签列表
      people: [], // 录入人
      keyword: '', // 关键字
      choiceQues: [], // 精选题库列表
      tempChoiceQues: [], // 精选题库筛选数组列表
      // 头部筛选内容数据
      formData: {
        subjectID: '',
        twoLevelDisplay: '',
        tags: '',
        keyword: '',
        questionType: '',
        province: '',
        city: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: ''

      },

      chkState: '', // 审核结果
      chkRemarks: '', // 审核原因
      rules: {},

      // 分页数据
      requestParameters: {
        // total: 0,
        page: 1,
        pagesize: 10
      },
      showDialog: false, // dialog
      showDialogs: false,

      quesMess: [], // 题目预览
      quesTion: [], // 题干内容

      vedios: false,

      // 视频播放数据
      playStatus: ''

    }
  },
  computed: {

  },
  watch: {
  },
  created () {
    this.subSimple()
    this.tagsSimple()
    this.userSimple()
    this.choice()
    this.getCityData()
  },
  mounted () {

  },
  methods: {
    // 跳转到新增试题页面
    goques () {
      this.$router.push({ path: 'new' })
    },
    // 删除
    choiceAdd (id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // 调用删除接口
          await choiceAdd(id)
            .then(response => {
              // 提示成功
              this.$message.success('成功移除题库' + '!')
              // 刷新数据
              this.choice()
              // 关闭弹窗
              this.showDialog = false
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
      this.$confirm('此操作将永久删除题库 ?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async action => {

        }
      })
    },
    // 获取学科简单列表
    async  subSimple () {
      const { data } = await subSimple(this.page, this.pagesize, this.formData.subjectID)
      this.subNameList = data
      // console.log(data)
    },
    // 获取二级目录列表
    async  handleSub (name) {
      // const { data } = await dirSimple(this.formData.subjectID)
      const { data } = await dirSimple(name)
      console.log(data)
      this.twoLeveList = data
      this.requestParameters.twoLevelDisplay = this.twoLeveList[0]
    },
    // 获取标签接口
    async  tagsSimple (name) {
      const { data } = await tagsSimple(name)
      // console.log(data)
      this.tagsList = data
      this.requestParameters.tags = this.tagsList[0]
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.requestParameters.city = this.citySelect.cityDate[0]
    },
    // 获取用户简单列表
    async userSimple () {
      const { data } = await userSimple(this.keyword)
      // console.log(data)
      this.people = data
    },
    // 获取精选题库列表
    async choice () {
      // 过滤掉空的内容
      const formData = omitBy(this.formData, (value, key) => isEmpty(value) && !isNumber(value))
      const { data: { items } } = await choice(formData)
      // console.log(items)
      this.choiceQues = items
      this.tempChoiceQues = this.choiceQues
    },
    // 清除按钮
    submitForm () {
      this.$refs.formData.resetFields()
    },
    // tab切换
    handleClick (tab, event) {
      const states = []
      this.choiceQues = this.tempChoiceQues
      // console.log(tab, event)
      // 待审核
      if (tab.index === 1) {
        console.log(111)
        this.choiceQues.forEach(t => {
          if (t.chkState === 1) {
            states.push(t)
          }
        })
        console.log(states)// chkState为1 的数组

        // 发请求获取所有待审核得数据
        this.requestParameters.page = 1

        this.choiceQues = states
      } else if (tab.index === 2) {
        console.log('已审核')
        // 已审核
        this.choiceQues.forEach(t => {
          if (t.chkState === 2) {
            states.push(t)
          }
        })
        console.log(states)// chkState为2 的数组
        // 发请求获取所有已审核得数据
        this.requestParameters.page = 1

        this.choiceQues = states
      } else if (tab.index === 3) {
        // 已拒绝
        console.log('已拒绝')

        this.choiceQues.forEach(t => {
          if (t.chkState === 0) {
            states.push(t)
          }
        })
        console.log(states)// chkState为2 的数组
        // 发请求获取所有已审核得数据
        this.requestParameters.page = 1

        this.choiceQues = states
      } else {
        // 全部
        this.requestParameters.page = 1
        this.choice()
      }
    },
    // 审核
    doSome (data) {
      this.choiceQues.id = data.id
      this.showDialog = true
      this.chkState = this.$options.data().chkState
      this.chkRemarks = this.$options.data().chkRemarks
    },
    // 审核提交
    async  btnOk () {
      // console.log(this.chkState)
      if (this.$refs.in.value === '') {
        this.$message('审核意见为必填')
      } else {
        // 审核需要获取到审核状态和审核意见
        await choiceCheck({
          chkState: this.chkState * 1, // 审核状态  1通过 2不通过
          chkRemarks: this.chkRemarks, // 审核原因
          id: this.choiceQues.id

        })

        // 提示信息
        this.$message.success('审核成功')
        this.choice()
        this.showDialog = false
      }
    },
    // 点击修改
    edit (id) {
      this.$router.push({
        name: 'questions-new',
        query: {
          id: id
        }
      })
    },
    // 点击上架  下架
    async  downUp (val) {
      // console.log(val)
      var status = ''
      if (val.publishState === 1) {
        val.publishState = 0
        status = '上架'
      } else {
        val.publishState = 1
        status = '下架'
      }
      var data = {
        id: val.id,
        publishState: val.publishState
      }
      this.$confirm(`您确认${status}这道题目吗？` + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          // 根据ID修改对应题库上下架状态   返回对象
          await choicePublish(data)
            .then(response => {
              // 提示成功
              this.$message.success(`成功${status}题库` + '!')
              // 刷新数据
              this.choice(this.formData)
            })
            .catch(response => {
              this.$message.error(`${status}失败!`)
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 点击预览
    async  lookQues (id) {
      // console.log(id)
      this.showDialogs = true
      const { data } = await detail(id)
      console.log(data)
      this.quesMess = data
      this.quesTion = data.options
    },
    // 搜索
    handleFilter () {
      // console.log(1)
      this.requestParameters.page = 1
      // console.log(this.formData.subjectID, this.formData.keyword)
      const arr = {}
      arr.subjectID = this.formData.subjectID
      arr.keyword = this.formData.keyword
      if (arr !== '') { this.choice(arr) }
    },
    // 视频显示与隐藏
    videoPlay () {
      if (this.vedios === false) {
        this.vedios = true
      } else {
        this.vedios = false
      }
    },
    // 分页方法
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }

  }

}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.questionsChoice-contain {
  margin: 10px;
}
.btn-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.total {
  display: flex;
  align-items: center;
  padding-left: 15px;
  width: 100%;
  height: 30px;
  background-color: #f4f4f5;
  color: #909399;
}
.block {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}
i {
  font-style: normal;
}
</style>
